<template>
  <Card>
    <div style="overflow: hidden; height: 40px;">
      <Button type="primary" @click="openNewGood">新增商品</Button>
      <Input v-model="searchValue" search enter-button placeholder="请输入关键字……" style="float: right; width: 250px;"
             @on-change="getGoods"/>
    </div>
    <Table :columns="columns" :data="dataList" style="margin-top: 10px;"></Table>
    <div class="page">
      <Page :total="pageTotal" :page-size="pageSize" :current="pageNum" @on-change="changePage"></Page>
    </div>
    <Modal v-model="goodModal">
      <p slot="header">
        <span>{{goodModalTitle}}</span>
      </p>
      <Form ref="good" :model="good" :rules="goodRules" :label-width="100">
        <FormItem prop="name" label="商品名称：">
          <Input type="text" v-model="good.name" placeholder="请输入商品名称"></Input>
        </FormItem>
        <FormItem prop="price" label="商品单价：">
          <InputNumber v-model="good.price" :min="0"></InputNumber>
        </FormItem>
        <FormItem prop="version" label="商品版本：">
          <Input type="text" v-model="good.version" placeholder="请输入商品版本"></Input>
        </FormItem>
        <FormItem prop="description" label="商品描述：">
          <Input type="text" v-model="good.description" placeholder="请输入商品描述"></Input>
        </FormItem>
        <FormItem prop="note" label="商品备注：">
          <Input type="text" v-model="good.note" placeholder="请输入商品备注"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary" :loading="saveLoading" @click="saveGood">保存</Button>
      </div>
    </Modal>
    <Modal v-model="applyModal">
      <p slot="header">
        <span>供货信息</span>
      </p>
      <Form ref="apply" :model="apply" :rules="applyRules" :label-width="100">
        <FormItem prop="zoneId" label="物业：">
          <Select v-model="apply.zoneId">
            <Option v-for="zone in zones" :key="zone.id" :value="zone.id">{{zone.zoneName}}</Option>
          </Select>
        </FormItem>
        <FormItem prop="level" label="供货等级：">
          <Select v-model="apply.level">
            <Option :value="1">1级</Option>
            <Option :value="2">2级</Option>
            <Option :value="3">3级</Option>
            <Option :value="4">4级</Option>
            <Option :value="5">5级</Option>
          </Select>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary" :loading="saveLoading" @click="saveApply">保存</Button>
      </div>
    </Modal>
  </Card>
</template>

<script>
  export default {
    name: "good-list",
    data() {
      return {
        // 页码
        pageNum: 1,
        // 页大小
        pageSize: 10,
        // 页总数
        pageTotal: 0,
        // 搜索信息
        searchValue: "",
        // 厂商id
        factoryId: null,
        // 表数据
        dataList: [],
        // 表头
        columns: [
          {
            title: "编号",
            key: "id"
          }, {
            title: "名称",
            key: "name"
          }, {
            title: "单价",
            key: "price"
          }, {
            title: "版本",
            key: "version"
          }, {
            title: "描述",
            key: "description"
          }, {
            title: "备注",
            key: "note"
          }, {
            title: "操作",
            key: "action",
            width: 250,
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary'
                  },
                  on: {
                    click: () => {
                      this.goodModal = true;
                      this.saveLoading = false;
                      this.goodModalTitle = "编辑商品";
                      this.$refs["good"].resetFields();
                      this.good.id = params.row.id;
                      this.good.name = params.row.name;
                      this.good.price = params.row.price;
                      this.good.version = params.row.version;
                      this.good.description = params.row.description;
                      this.good.note = params.row.note;
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'info'
                  },
                  style: {
                    "margin-left": "10px",
                  },
                  on: {
                    click: () => {
                      this.applyModal = true;
                      // 重置按钮加载状态
                      this.saveLoading = false;
                      // 重置表单
                      this.$refs['apply'].resetFields();
                      this.apply = {
                        goodId: params.row.id,
                        zoneId: null,
                        money: params.row.money,
                        factoryId: this.factoryId,
                        level: null,
                      };
                    }
                  }
                }, '供货'),
                h('Button', {
                  props: {
                    type: 'error'
                  },
                  style: {
                    "margin-left": "10px",
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title: "删除确认",
                        content: "您是否要确认删除此商品？",
                        onOk: () => {
                          this.deleteGood(params.row.id);
                        }
                      })
                    }
                  }
                }, '删除'),
              ])
            }
          }
        ],
        // 商品模态框
        goodModal: false,
        // 商品模态框标题
        goodModalTitle: "新增商品",
        // 商品信息
        good: {
          id: null,
          name: "",
          price: 0.00,
          version: "",
          description: "",
          note: "",
        },
        goodRules: {
          name: [
            { required: true, message: '商品名称不能为空', trigger: 'blur' }
          ],
          version: [
            {required: true, message: "商品版本不能为空", trigger: 'blur'}
          ]
        },
        saveLoading: false,
        // 供货模态框
        applyModal: false,
        apply: {
          goodId: 0,
          zoneId: null,
          money: 0.00,
          factoryId: 0,
          level: null,
        },
        applyRules: {
          zoneId: [
            {required: true, message: "物业不能为空", trigger: 'blur', type: "number"}
          ],
          level: [
            {required: true, message: "信用等级不能为空", trigger: 'blur', type: "number"}
          ]
        },
        zones: []
      }
    },
    methods: {
      // 翻页
      changePage (pageNo) {
        // 更改当前页
        this.pageNum = pageNo;
        // 重新获取数据
        this.getGoods();
      },
      // 获取当前登录厂商信息
      getFactory(callback) {
        this.$requests.get("/factory/get", null).then(res => {
          if (res.data.code === 0) {
            this.factoryId = res.data.data.id;
          }
          if (callback) {
            callback();
          }
        })
      },
      // 获取商品
      getGoods() {
        this.$requests.get("/good/getAllGoods", {
          search: this.searchValue,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          factoryId: this.factoryId
        }).then(res => {
          if (res.data.code === 0) {
            this.dataList = res.data.data.list;
            this.pageTotal = res.data.data.total;
            this.pageNum = res.data.data.pageNum;
          } else {
            this.$Message.error(res.data.msg);
          }
        })
      },
      // 打开新增商品
      openNewGood() {
        this.goodModal = true;
        this.saveLoading = false;
        this.goodModalTitle = "新增商品";
        this.$refs["good"].resetFields();
        this.good = {
          id: null,
          name: "",
          price: 0.00,
          version: "",
          description: "",
          note: "",
        };
      },
      // 保存商品
      saveGood() {
        this.$refs["good"].validate((valid) => {
          if (valid) {
            this.saveLoading = true;
            this.good.factoryId = this.factoryId;
            this.$requests.post("/good/save", this.good).then(res => {
              if (res.data.code === 0) {
                this.$Message.success("商品保存成功");
                this.getGoods();
                this.goodModal = false;
              } else {
                this.saveLoading = false;
                this.$Message.error(res.data.msg);
              }
            })
          }
        })
      },
      // 删除商品
      deleteGood(id) {
        this.$requests.post("/good/delete", {id: id, factoryId: this.factoryId}).then(res => {
          if (res.data.code === 0) {
            this.$Message.success("商品删除成功");
            this.getGoods();
          } else {
            this.$Message.error(res.data.msg);
          }
        })
      },
      getZones() {
        this.$requests.get("/zone/getAll").then(res => {
          if (res.data.code === 0) {
            this.zones = res.data.data;
          }
        })
      },
      saveApply() {
        this.$refs["apply"].validate((valid) => {
          if (valid) {
            this.saveLoading = true;
            this.apply.factoryId = this.factoryId;
            this.$requests.post("/apply/save", this.apply).then(res => {
              if (res.data.code === 0) {
                this.$Message.success("供货意向保存成功");
                this.applyModal = false;
              } else {
                this.saveLoading = false;
                this.$Message.error(res.data.msg);
              }
            })
          }
        })
      }
    },
    created() {
      this.getFactory(() => {
        this.getGoods();
      });
      this.getZones();
    }
  }
</script>

<style lang="less" scoped>
  .page {
    margin-top: 10px;
    text-align: right;
  }
</style>
